<template>
  <div>
    <!-- <my-glo /> -->
    父组件{{obj}}
    <input
      type="text"
      v-model='name'
    >
    <myinput v-model='name' />
    <!--  v-model   value属性 合  input时间的结合； 也就是 相当于
        :value = 'name'
        @input=val=>name=val
     -->
    <mychild
      ref='box'
      :selfname='name'
      :obj='obj'
      @mychange='change'
    />
  </div>
</template>
<script>
// @ is an alias to /src
// A组件中使用了 B组件 ；那么 A组件就是父组件， B组件就是子组件
/* 
  父传子 ： 自定义行内属性传递  子组件通过props接收
  子传父：  自定义事件 让这个事件对应额函数在子组件执行 子组件通过参数的方式把子组建的数据传给父组件
            自定义事件+$emit
  组件之间的数据传递一共有几种方式          
*/
import mychild from "./components/child";
import myinput from "./components/my-input";
import MyInput from "./components/my-input.vue";
export default {
  name: "XXX",
  data() {
    return {
      name: "珠峰",
      obj: {
        age: 123,
        sex: 666,
      },
    };
  },
  methods: {
    change(name) {
      console.log(arguments);
      // console.log(this.$refs.box);
      this.name = name;
    },
  },
  components: {
    mychild,
    "my-child": mychild,
    myChild: mychild,
    myinput,
  },
};

MyInput;
</script>
<style lang="less">
</style>